import Taro, { Component, Config } from '@tarojs/taro';
import './customNavBar.scss';
import { AtNavBar, AtButton, AtIcon } from 'taro-ui';
import { View, Text, MovableArea, MovableView } from '@tarojs/components';

export default class customNavBar extends Component {

  /**自定义的组件
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  /**
   * *************重要API*************
   * title：标题
   * left:是否展示左边图标
   * 其余的需要的时候再扩展
   * 使用：1、导入组件：import Cnavbar from '../../components/custom-NavBar/customNavBar'
   *      2、使用组件： <Cnavbar title='123' left={true}></Cnavbar>
   *
   */
  Config = {
    component: true,
  }

  constructor(props) {
    super(props);
  }

  handleClick(){

  }
  goToHome(){

  }
  render() {
    const {title,left}=this.props;
    const homeHide = this.props.homeHide ? true:false;
    return (
      <View className='page' >
        <AtNavBar
          onClickLeftIcon={this.handleClick.bind(this, '返回')}
          title={title}
          leftIconType="{{left?'chevron-left':''}}"
          fixed={true}
          className="{{navBarType?'navBarX':'navBar'}}"
        />
        {homeHide
          ? ""
          : <MovableArea className="home_area">
            <MovableView className="home_view" onClick={this.goToHome} direction='vertical'>
              <AtIcon value='home' size='20' color='#fff'></AtIcon><Text className="home_title">首页</Text>
            </MovableView>
          </MovableArea>
        }
      </View>
    )
  }
}
